<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" th:href="@{/richText/bootstrap-combined.no-icons.min.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/richText/index.css}" type="text/css"></link>
    <link href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet"
          type="text/css">

    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/bootstrap-responsive.min.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/font-awesome-4.6.3/css/font-awesome.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/ace.min.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/ace-skins.min.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/ace-responsive.min.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/webuploader/webuploader.css}" type="text/css">
</head>

<style>
    body, html {
        width: 100%;
        height: 100%;
        background: #fff;
    }

    .modal {
        width: 800px;
        margin-left: -400px;
    }

    .form-control {
        display: block;
        width: 50%;
        height: 35px;
        line-height: 35px;
        margin-bottom: 20px;
        padding: 6px 12px;
        font-size: 14px;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
        -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    }

    .thumbnail {
        float: left;
        position: relative;
        margin: 0 20px 20px 0;
        width: 110px;
        height: 110px;
        padding: 4px;
    }

    .file-item .info {
        position: absolute;
        left: 4px;
        bottom: 4px;
        right: 4px;
        height: 20px;
        line-height: 20px;
        text-indent: 5px;
        background: rgba(0, 0, 0, 0.6);
        color: white;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 12px;
        z-index: 10;
    }

    #filePicker {
        display: inline-block;

        vertical-align: middle;
        margin: 0 12px 0 0;
    }

    .imgList {
        width: 30px;
        height: 30px;
    }

    .red {
        width: 73%;
        margin: auto;
    }


    #main-content {
        margin-left: 190px;
    }

    #page-content {
        margin: 0;
        background: #FFF;
        position: relative;
        top: 0%;
        left: -10%;
    }

    .modal-footer {
        background: #fff;
    }
</style>

<body>


<div id="main-content" class="clearfix">
    <div id="page-content" class="clearfix">

        <div class="page-header position-relative" data-toggle="modal" data-target="#myModal">
            <h1 style="color: #2679b5;">品牌商
                <small><i class="icon-double-angle-right"></i> 商品分类&主图</small>
            </h1>
        </div>

        <table id="table_bug_report" class="table table-striped table-bordered table-hover">
            <thead>
            <tr>
                <th class="center" style="display: none;">
                    <label><input type="checkbox" class="ace-checkbox-2"><span class="lbl"></span></label>
                </th>
                <th>商品标题</th>
                <th>分类</th>
                <!--<th class="hidden-480">主图</th>-->
                <th class="hidden-480">状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="goodstable"></tbody>
        </table>
        <!--<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">新增</button>-->


        <!--        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">-->
        <!--            <div class="modal-dialog" role="document">-->
        <!--                <div class="modal-content">-->
        <!--                    <div class="modal-header">-->
        <!--                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span-->
        <!--                                aria-hidden="true">&times;</span></button>-->
        <!--                        <h4 class="modal-title" id="myModalLabel">商品信息</h4>-->
        <!--                    </div>-->
        <!--                    <div class="modal-body">-->
        <!--                        <form class="form-horizontal">-->

        <!--                            <div class="control-group">-->
        <!--                                <p class="red">商品标题准确、简洁、完整</p>-->
        <!--                                <label class="control-label">商品标题</label>-->
        <!--                                <div class="controls">-->
        <!--                                    <select id="form-field-select-1">-->
        <!--                                        <option value=""></option>-->
        <!--                                        <option value="AL">Alabama</option>-->
        <!--                                        <option value="AK">Alaska</option>-->
        <!--                                    </select>-->
        <!--                                </div>-->
        <!--                            </div>-->
        <!--                            <div class="control-group">-->
        <!--                                <p class="red">请先选择GMC借卖平台商品大类，此分类决定了您的商品在借卖平台中展示的位置</p>-->
        <!--                                <label class="control-label">商品分类</label>-->
        <!--                                <div class="controls">-->
        <!--                                    <select id="form-field-select-2" multiple="multiple">-->
        <!--                                        <option value="AL">Alabama</option>-->
        <!--                                        <option value="AK">Alaska</option>-->
        <!--                                        <option value="AZ">Arizona</option>-->
        <!--                                    </select>-->

        <!--                                    <select id="form-field-select-3" multiple="multiple">-->
        <!--                                        <option value="AL">Alabama</option>-->
        <!--                                        <option value="AK">Alaska</option>-->
        <!--                                        <option value="AZ">Arizona</option>-->
        <!--                                    </select>-->
        <!--                                </div>-->
        <!--                            </div>-->


        <!--                            <div class="control-group">-->
        <!--                                <p class="red">-->
        <!--                                    图片要求：-->
        <!--                                    最多可以上传12张图：eBay 12张、Amazon 9张；-->
        <!--                                    分辨率1000像素（高度）X 1000像素（宽度）以上；-->
        <!--                                    正方形，为无水印白底图或情景图，商品占图片80%；-->
        <!--                                    可以是多角度拍摄商品图片，也可以是细节图。-->
        <!--                                </p>-->
        <!--                                <label class="control-label">商品主图</label>-->

        <!--                                <div class="controls">-->
        <!--                                    <span style="font-size:14px;"><div id="uploader-demo">-->
        <!--                  &lt;!&ndash;用来存放item&ndash;&gt;-->
        <!--                  <div id="thelist" class="uploader-list"></div>-->
        <!--                  <div>-->
        <!--                   <div id="filePicker">选择图片</div>-->
        <!--                   <button id="ctlBtn" class="btn btn-default">开始上传</button>-->
        <!--                  </div>-->
        <!--                     <small class="blue">商品主图第1张图片，将出现在商-->
        <!--                        品列表页、商品详情页第一张图等</small>-->
        <!--                  </div>-->
        <!--                  </span>-->
        <!--                                </div>-->
        <!--                            </div>-->
        <!--                        </form>-->
        <!--                    </div>-->
        <!--                    <div class="modal-footer">-->
        <!--                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>-->
        <!--                        <button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--        </div>-->
    </div>
</div>

<script th:src="@{/js/jquery-1.9.1.js}" type="text/javascript"></script>
<script th:src="@{/webuploader/webuploader.js}" type="text/javascript"></script>
<script th:src="@{/js/bootstrap.min.js}" type="text/javascript"></script>
<script th:src="@{/js/bootbox.min.js}" type="text/javascript"></script>
<script type="text/javascript">
    var datalist = ""
    var mvo_id

    $(function () {
        var url = location.search;
        var Request = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1)　//去掉?号
            strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
                Request[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
            }
        }

        mvo_id = Request["uid"]
        console.log(mvo_id);
        //将需要修改信息的商品ID传到该页面
        // $("#index").attr('href','/role?uid='+mvo_id);
        // alert(mvo_id)
    })

    $(function () {
        /*init webuploader*/
        var $list = $("#thelist");   //这几个初始化全局的百度文档上没说明，好蛋疼。
        var $btn = $("#ctlBtn");   //开始上传
        var thumbnailWidth = 100;   //缩略图高度和宽度 （单位是像素），当宽高度是0~1的时候，是按照百分比计算，具体可以看api文档
        var thumbnailHeight = 100;

        var uploader = WebUploader.create({
            // 选完文件后，是否自动上传。
            auto: false,

            // swf文件路径
            swf: '/Uploader.swf',

            // 文件接收服务端。
            server: 'http://webuploader.duapp.com/server/fileupload.php',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#filePicker',

            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            },
            method: 'POST',
        });
        // 当有文件添加进来的时候
        uploader.on('fileQueued', function (file) {  // webuploader事件.当选择文件后，文件被加载到文件队列中，触发该事件。等效于 uploader.onFileueued = function(file){...} ，类似js的事件定义。
            var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img>' +
                '<div class="info">' + file.name + '</div>' +
                '</div>'
                ),
                $img = $li.find('img');


            // $list为容器jQuery实例
            $list.append($li);

            // 创建缩略图
            // 如果为非图片文件，可以不用调用此方法。
            // thumbnailWidth x thumbnailHeight 为 100 x 100
            uploader.makeThumb(file, function (error, src) {   //webuploader方法
                if (error) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }

                $img.attr('src', src);
            }, thumbnailWidth, thumbnailHeight);
        });
        // 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#' + file.id),
                $percent = $li.find('.progress span');

            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<p class="progress"><span></span></p>')
                    .appendTo($li)
                    .find('span');
            }

            $percent.css('width', percentage * 100 + '%');
        });

        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on('uploadSuccess', function (file) {
            $('#' + file.id).addClass('upload-state-done');
        });

        // 文件上传失败，显示上传出错。
        uploader.on('uploadError', function (file) {
            var $li = $('#' + file.id),
                $error = $li.find('div.error');

            // 避免重复创建
            if (!$error.length) {
                $error = $('<div class="error"></div>').appendTo($li);
            }

            $error.text('上传失败');
        });

        // 完成上传完了，成功或者失败，先删除进度条。
        uploader.on('uploadComplete', function (file) {
            $('#' + file.id).find('.progress').remove();
        });
        $btn.on('click', function () {
            console.log("上传...");
            uploader.upload();
            console.log("上传成功");
        });

        $('.ace-checkbox-2').change(function () {
            if ($('.ace-checkbox-2').prop('checked')) {
                $('.input').prop('checked', true);
            } else {
                $('.input').prop('checked', false);
            }
        })

        $('.btn-danger').click(function () {
            bootbox.alert("删除成功！");
        })
    });

    var i = 0
    var toBeUploaded = '<span class="label label-inverse arrowed-in" id="S">已入仓</span>'
    var uploaded = '<span class="label label-sm label-info arrowed arrowed-righ">上架中</span>'
    var toBeIntoStorehouse = '<span class="label label-sm label-warning">待入仓</span>'

    // <span class="label label-success">入仓中</span>


    function upgoods(i) {
        // alert(i)
        if (confirm("确定上架？")) {
            $.ajax({
                type: "post",
                url: "/goods/uploadToStore",
                data: {id: i},
                dateType: 'text',
                success: function (re) {
                    alert(re)
                    window.location.reload()
                },
                error: function () {
                    alert("获取已经有问题了")
                    window.location.reload()
                }
            })
        }

    }

    function downgoods(i) {
        // alert(i)
        //待上架 ， 上架 ， W
        if (confirm("确认下架？")) {
            $.ajax({
                type: "post",
                url: "/goods/goOffFromStore",
                data: {id: i},
                dateType: 'text',
                success: function (re) {
                    alert(re)
                    window.location.reload()
                },
                error: function () {
                    alert("获取已经有问题了")
                    window.location.reload()
                }
            })
        }

    }


    function into(i) {
        // alert(i)
        if (confirm("确认入仓？")) {
            $.ajax({
                type: "post",
                url: "/goods/uploadToStorehouse",
                data: {id: i},
                dateType: 'text',

                success: function (re) {
                    alert(re)
                    window.location.reload()
                },
                error: function () {
                    alert("获取已经有问题了")
                    window.location.reload()
                }
            })
        }

    }

    function offstorehouse(i) {
        if (confirm("确认下仓？")) {
            $.ajax({
                type: "post",
                url: "/goods/offstorehouse",
                data: {id: i},
                dateType: 'text',

                success: function (re) {
                    alert(re)
                    window.location.reload()
                },
                error: function () {
                    alert("获取已经有问题了")
                    window.location.reload()
                }
            })
        }
    }


    function delgoods(o) {
        alert(o)
    }

    function gotoedit(id) {
        alert(id)
    }


    function gotogoodsdetail(i, nu, brandid) {
        // alert(title)
        //  alert(good.title)
        //  console.log(title + ' 404')
        // alert(title)
        var table = document.getElementById("goodstable")

        var title = table.rows[i].cells[1].innerText
        // console.log(title)
        $.ajax({
            type: "post",
            url: "/goods/selectGoodsByTitle",
            dataType: "json",
            data: {title: title},
            success: function (good) {
                // for(i in good){
                //     console.log(i)
                // }

                console.log(good.title, nu, good.brandId, good.price, good.sku, good.ena, good.amazonDescription, good.ebayDescription)
                // alert('sada')
                window.location.href = '/mvogoodsDetail?title=' + good.title + '&price=' + good.price + '&sku=' + good.sku + '&brand=' + good.brandId + '&nu=' + nu + '&amazon=' + good.amazonDescription + '&ebay=' + good.ebayDescription + '&image=' + good.image;


            },
            error: function () {
                console.log('not good')
            }
        })
    }

    $(function () {
        var $tbody = $("#goodstable");//表格
        // alert($tbody.id)
        $.ajax({
            type: 'post',
            url: '/goods/selectGoodsByCompanyID',
            data: {mvo_id: mvo_id},
            dataType: 'json',

            success: function (goods) {
                var newHtml = '';
                datalist = goods
                for (var i = 0; i < goods.length; i++) {
                    var but1 = '<button id="up" class="btn btn-mini btn-success" onclick="upgoods(' + goods[i].id + ')">上架</button>'
                    var but2 = '<button id="down" class="btn btn-mini btn-success" onclick="downgoods(' + goods[i].id + ')" >下架</button>'
                    var but3 = '<button id="in" class="btn btn-mini btn-success" onclick="into(' + goods[i].id + ')">入仓</button>'
                    var but4 = '<button id="in" class="btn btn-mini btn-success" onclick="offstorehouse(' + goods[i].id + ')">下仓</button>'
                    if (goods[i].state == "S") {
                        var stat = toBeIntoStorehouse
                        var but = but3;
                    } else if (goods[i].state == "A") {
                        var stat = uploaded
                        var but = but2;
                    } else if (goods[i].state == "W") {
                        var stat = toBeUploaded
                        var but = but1 + but4
                    }
                    // for(var obj in goods[i])
                    // {
                    //     console.log(obj);
                    // }
                    //获取商品分类名
                    // var ti = goods[i].title
                    var na
                    $.ajax({
                        type: 'post',
                        url: '/classification/selectClassificationNameByID',
                        data: {id: goods[i].classificationId},
                        dataType: 'text',
                        async:false,
                        success: function (clazzname) {
                            console.log(clazzname)
                            // alert(clazzname)
                            na = clazzname
                            // alert(na)
                        },
                        error: function () {
                            alert("第一层")
                        }
                    })
                    // alert(na + '2')

                    var nu
                    $.ajax({
                        type: 'post',
                        url: '/savegoods/selectSaveGoodsByPrimaryKey',
                        data: {goodsID: goods[i].id, mvoID: mvo_id},
                        dataType: 'json',
                        async:false,
                        success: function (key) {
                            // alert(key.goodsNum)
                            nu = key.goodsNum
                            console.log(nu)
                        },
                        error: function () {
                            // alert('ok')
                        }
                    })
                    // alert(na)
                    newHtml += '<tr>';
                    newHtml += '          <td class="center" style="display:none">';
                    newHtml += '            <label><input type="checkbox" class="input"><span class="lbl"></span></label>';
                    newHtml += '          </td>';
                    newHtml += '          <td><a href="#" onclick="gotogoodsdetail(' + i + ',' + nu + ',' + goods[i].brandId + ')">' + goods[i].title + '</a></td>';
                    newHtml += '          <td>' + na + '</td>';
                    newHtml += '          <td class="hidden-phone">' + stat + '</td>';
                    newHtml += '          <td>';
                    newHtml += '            <div class="inline position-relative" >';
                    newHtml += '              <button class="btn btn-mini btn-info" data-toggle="modal" data-target="#myModal" onclick="gotoe(' + i + ')"><i class="icon-edit"></i></button>';
                    // newHtml+='              <button class="btn btn-mini btn-danger" onclick="delgoods('+clazzname+')"><i class="icon-trash"></i></button>';
                    newHtml += but
                    // newHtml+='<button id="up" class="btn btn-mini btn-success" disabled="disabled">上架</button>'
                    // newHtml+='<button id="down" class="btn btn-mini btn-success" disabled="disabled">下架</button>'
                    // newHtml+='<button id="in" class="btn btn-mini btn-success" disabled="disabled">入仓</button>'
                    newHtml += '            </div>';
                    newHtml += '          </td>';
                    newHtml += '        </tr>';
                }
                $tbody.html(newHtml);
            },
            error: function () {
                alert("inseGoodsError")
            }
        })
    })

    function gotoe(i) {
        var flag = 1
        console.log(datalist[i].id, datalist[i].image)
        window.location.href = "/mvoupdateGoods?id=" + datalist[i].id + '&uid=' + mvo_id + "&flag=" + flag + "&image=" + datalist[i].image;
    }
</script>
</body>
</html>
